<template>
	<view class="">
		<view class="">
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar leftText="我的家庭" autoBack>
			</u-navbar>
		</view>


		<view class="con-body wrap" style="padding-bottom:30rpx;">
			<view class="head_con">
				<view>
					<u-cell-group :border="false">
						<u-cell :title="home" titleStyle="color:#fff;" rightIconStyle="color:#fff;" :border="false" isLink ></u-cell>
							<!-- @click="showFloor = true" -->
					</u-cell-group>
				</view>
				<view class="intro_con">
					<view class="yazhu">业主</view>
					<view class="intro u-flex u-row-between">
						<text>{{user.username}}</text>
						<text>{{user.phone}}</text>
					</view>
				</view>
			</view>
			<view class="main-service">
				<view class="title">已登记住户信息</view>
				<view class="fa_list" style="background-color: #fff;border-radius: 10rpx;">
					<u-empty :show="showEmpty" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
					</u-empty>
					<view class="list_con" v-for="(item,index) in familyList" :key="index">
						<view class="u-flex u-row-between" style="margin-bottom:20rpx;">
							<view>
								<text class="shenfen" v-if="item.type==0">家人</text>
								<text class="shenfen" v-else>租客</text>
								<text style="font-size: 32rpx;">{{item.name}}</text>
							</view>
							<text v-if="item.status==0" style="font-size: 26rpx;color:#0B868E;">待审核</text>
							<text v-else-if="item.status==1" style="font-size: 26rpx;color:#0B868E;">信息录入成功</text>
							<text v-else style="font-size: 26rpx;color:#0B868E;">未通过审核</text>
						</view>
						<view class="u-flex u-row-between">
							<text style="font-size: 26rpx;color:#999;">{{item.tel}}</text>
							<view class="del_con" @click="del(item.id)">删除</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 下拉工具 -->
			<u-action-sheet :show="showFloor" :actions="actionsFloor" title="请选择您的房产" @close="showFloor = false"
				@select="floorSelect">
			</u-action-sheet>
			
			<u-toast ref="uToast"></u-toast>
			<u-modal :show="showmodal" :showCancelButton="true" confirmColor="#0B868E" 
			:closeOnClickOverlay="true" :title='content' @close="showmodal=false" @cancel="showmodal=false" @confirm="confirm"></u-modal>
			<u-button :customStyle="btnStyle" @click="toRealease">邀请我的家庭成员</u-button>
		</view>
	</view>
</template>

<script>
	import { getInfo,getFamily,getHouse,delFamily } from "@/service/userService.js";
	export default {
		data() {
			return {
				
				btnStyle: {
					width: '96%',
					borderRadius: '40rpx',
					marginLeft: '0%',
					// marginTop: '50rpx',
					backgroundImage: "url('https://resourse.cnlhjt.com/upload/20220825/d1aa35c1d129137d9b12c8f34e59c5bc.png')",
					backgroundSize: '100% 80rpx',
					color: '#FFFFFF',
					position:'fixed',
					bottom:'20rpx'
				},
				titleStyle: {
					color: '#FFFFFF',
					marginLeft: '10rpx'
				},
				showFloor: false,
				actionsFloor: [],
				home: '',
				user: {
					username: '您好！请登录！',
					phone:'000000',
				},
				defaultHouse: '1',
				familyList:[],
				showEmpty:false,
				showmodal:false,
				id:0,
				content:'是否确定删除信息？'
			}
		},
		onShow() {
			getFamily().then(this.getFamily);
			
		},
		mounted() {
			getInfo().then(this.getInfo);
			getHouse().then(this.getHouse);
		},
		methods: {
			getHouse(e){
				if(e.code==200){
					for(var i=0;i<e.result.data.length;i++){
						var name=e.result.data[i].house
						this.actionsFloor.push({name:name})
					}
					// this.actionsFloor=e.result.data
				}
			},
			getFamily(e){
				if(e.code==200){
					this.familyList=e.result;
					this.showEmpty=false
				}else{
					this.showEmpty=true;
					this.familyList=[]
				}
			},
			getInfo(e){
				if(e.code == 200){
					this.user.username=e.result.username;
					this.user.phone=e.result.phone;
					this.home = e.result.house;
				}
			},
			toRealease(){
				uni.navigateTo({
					url:'./familyRelease'
				})
			},
			floorSelect(index){
				this.home=index.name
			},
			del(id){
				this.id=id;
				this.showmodal=true
			},
			confirm(){
				delFamily({
					id:this.id
				}).then(res=>{
					if (res.code == 200) {
						this.$refs.uToast.show({
							type: 'success',
							title: '删除成功',
							icon:false
						})
						setTimeout(function(){
							uni.navigateBack();
						},1000)
					} else {
						this.$refs.uToast.show({
							type: 'error',
							title: res.msg,
							icon:false
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f8f8f8;
	}
	.wrap{
		width:94%;
		margin-left:3%;
	}
	.head_con{
		margin-top:20rpx;
		padding:20rpx 0;
		width:100%;
		height:300rpx;
		background: url('https://resourse.cnlhjt.com/upload/20220825/c352f0420035fd9d9d3c42f23336f1bf.jpg') no-repeat center / 100% 95%; 
		background-position: top;
	}
	.intro_con{
		width:86%;
		margin-left:3%;
		padding:20rpx 4%;
		height:150rpx;
		background: url('https://resourse.cnlhjt.com/upload/20220825/45e47a669242194b4b2c2d01d571fcf9.jpg') no-repeat center / 100% 95%; 
		background-position: center;
		border-radius: 20rpx;
		overflow: hidden;
		.yazhu{
			font-size:32rpx;
			font-weight: bold;
			padding:20rpx 0;
		}
	
	}
	.main-service{
		background-color: transparent;
		box-shadow: none;
		.fa_list{
			background-color: transparent;
			border-radius: 10rpx;
			padding:20rpx;
			margin-top:15rpx;
			.list_con{
				border-bottom: 1rpx solid #ddd;
				padding:20rpx 0;
				.shenfen{
					font-size: 28rpx;
					color:#fff;
					padding:5rpx 25rpx;
					border-radius: 24rpx;
					margin-right:20rpx;
					background-image: linear-gradient(to right,#e8cea9,#d3b385);
				}
				.del_con{
					font-size: 28rpx;
					color:#0B868E;
					padding:0rpx 30rpx;
					border-radius: 24rpx;
					border:1rpx solid #0B868E;
				}
			}
			.list_con:last-child{
				border:none;
			}
		}
	}
</style>
